import React, {Component} from 'react';
import {Table, Progress, Input, Loading, Pagination, Button, Select} from '@alifd/next';
import DataBinder from "@icedesign/data-binder";
import IceContainer from '@icedesign/container';
import BarChar from './components/BarChar.jsx';
import PieChar from './components/PieChar.jsx';
import './BoxStatisics.scss'


//柱状图数据
const barData = {
  data: [
    {
      name: "领用",
      "机构1": 18.9,
      "机构2": 28.8,
      "机构3": 39.3,
      "机构4": 81.4,
    },
    {
      name: "清点",
      "机构1": 10.3,
      "机构2": 18.8,
      "机构3": 29.3,
      "机构4": 11.4,

    },
    {
      name: "归档",
      "机构1": 38.9,
      "机构2": 48.8,
      "机构3": 49.3,
      "机构4": 41.4,
    },
  ],
  fields: ['机构1', '机构2', '机构3', '机构4'],
};

// 饼图数据
const pieData = [
  {
    item: "未激活",
    count: 40
  },
  {
    item: "已注册",
    count: 21
  },
  {
    item: "领用",
    count: 17
  },
  {
    item: "清点",
    count: 13
  },
  {
    item: "归档",
    count: 9
  }
];

// table数据
const graphData = [
  {orgName: '工区1', name: '小王', num: 90},
  {orgName: '工区2', name: '小王1', num: 11},
  {orgName: '工区3', name: '小王2', num: 80},
  {orgName: '工区4', name: '小王3', num: 90},
  {orgName: '工区5', name: '小王4', num: 40},
  {orgName: '工区6', name: '小王5', num: 60},
];


export default class BoxStatistics extends Component {
  constructor(props) {
    super(props);
    this.state = {
      barData: barData,
      pieData: pieData,
      graphData: graphData,
      loading: false,
      AllOrgUser: [],
      SelectOrg: [],
      SelectUser: [],
      CurrentOrg: '全部',
      CurrentUser: '全部'
    }
  }


  selectOrg = (v) => {
    if (this.state.CurrentOrg === v) {
      return
    }
    this.setState({
      CurrentOrg: v,
      CurrentUser: '全部'
    });
    console.log(v)
    this.fetchGraph3({org: v})

    let tmpUser = ['全部'];

    if (v === '全部') {
      this.state.AllOrgUser.map(function (value, i) {
        tmpUser.push(value.user)
      });
      this.setState({
        SelectUser: tmpUser
      })
    } else {
      this.state.AllOrgUser.map(function (value, i) {
        if (value.org === v) {
          tmpUser.push(value.user)
        }
      });
      this.setState({
        SelectUser: tmpUser
      })
    }
  };

  SelectUser = (v) => {
    if (v === this.state.CurrentUser) {
      return
    }
    this.setState({
      CurrentUser: v
    })
    this.fetchGraph3({org: this.state.CurrentOrg, user: v})

  }

  // 表格里进度条
  renderCellProgress(value1, index, record) {
    return (<Progress percent={parseInt(value1 / record.total * 100)} hasBorder size="large"
                      textRender={() => parseFloat(value1 / record.total * 100).toFixed(2) + '%'}/>)
  };

  render() {
    return (
      <div className="dashboard-page">
        <IceContainer title='全部机构作业统计'>
          <BarChar barData={this.state.barData}/>

          <PieChar pieData={this.state.pieData}/>

        </IceContainer>
        <IceContainer title='清点异常排名'>
          <span style={{margin: '0 0 0 5px'}}>机构名称:<Select style={{margin: '0 0 0 5px'}}
                                                           dataSource={this.state.SelectOrg}
                                                           value={this.state.CurrentOrg}
                                                           onChange={this.selectOrg}/></span>
          <span style={{margin: '0 0 0 5px'}}>人员:<Select style={{margin: '0 0 0 5px'}}
                                                         dataSource={this.state.SelectUser}
                                                         value={this.state.CurrentUser}
                                                         onChange={this.SelectUser}/></span>
          <Table dataSource={this.state.graphData} loading={this.state.loading}>
            <Table.Column title="工区名称" dataIndex="orgName" width={150}/>
            <Table.Column title="人员" dataIndex="user" width={150}/>
            <Table.Column
              title="异常数量"
              dataIndex="num"
              width={300}
            />
          </Table>
          <div style={styles.paginationWrapper}>
            {/*<Pagination*/}
            {/*key={this.props.graphData.index}*/}
            {/*current={this.state.current}*/}
            {/*onChange={this.onPageChange}*/}
            {/*shape="arrow-only"*/}
            {/*total={this.props.total}*/}
            {/*/>*/}
          </div>
        </IceContainer>

      </div>
    );
  }
}


const styles = {
  paginationWrapper: {
    display: 'flex',
    padding: '20px 0 0 0',
    flexDirection: 'row-reverse',
  },
};
